<template>
    <div class="register">
        <!-- <el-form>
            <el-form-item>
                <el-input></el-input>
            </el-form-item>
        </el-form> -->
        
        <van-form class="regForm" ref="regForm" @submit="submitHandler">
            <van-cell-group inset>
                <van-field v-model="registerParams.tel" type="text" name="手机号" label="手机号" placeholder="手机号"
                    :rules="telRules" />
                <van-field v-model="registerParams.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field
                    v-model="telcode"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                    :rules="codeRules"
                >
                    <template #button>
                    <van-button size="small" type="primary" @click="sendCodeHandler">发送验证码</van-button>
                    </template>
                </van-field>
                <van-row class="footer">
                    <van-button type="primary" size="small" native-type="submit">注册</van-button>
                    <van-button type="primary" size="small">重置</van-button>
                </van-row>
            </van-cell-group>
        </van-form>
    </div>
</template>

<script setup lang="ts">
    // 在.vue文件中按需引入声明文件
    import type { Ref } from 'vue';
    
    import { ref,reactive } from 'vue';
    import {doCheckPhoneAPI,doSendMsgCodeAPI,doCheckCodeAPI,doFinishRegisterAPI} from "@/api/user"
    import { showSuccessToast, showFailToast } from 'vant';
    import { useRouter } from 'vue-router';

    defineOptions({
        name: "RegisterView",
    });

    let router= useRouter();
    let registerParams = reactive({
        tel:"",
        password:"",
    });

    let telcode:Ref = ref<string>("");
    let isTelOk:Ref = ref<boolean>(false);
    let regForm:Ref = ref();



    let validatorTel = (val:string) => {
        // 同步校验
        // return true 校验成功
        // return false/字符串 校验失败

        // 异步校验 返回Promise实例 resolve(true)  resolve(false/字符串)
        console.log(11111, val);
        
        if(/^1[3-9]\d{9}$/.test(val)){
            return doCheckPhoneAPI({tel:val}).then((res)=>{
                console.log(res);
                isTelOk.value = true;
                return true;
            }).catch(err=>{
                console.log("手机号已被注册");
                
                isTelOk.value = false;
                return err.message;
            })
        }else{
            return "请输入正确的手机号";
        }
    }

    let validatorCode = (val:string) =>{
        return doCheckCodeAPI({
            tel:registerParams.tel,
            telcode:telcode.value,
        }).then(()=>{
            console.log("验证码校验成功");
            return true;
        }).catch(err=>{
            return err.message;
        })
    }

    let telRules = ref([
        { required: true, message: '请填写手机号' },
        // {pattern:/^1[3-9]\d{9}$/,message:"请输入正确的手机号"},
        { validator:validatorTel,message:"手机号已被注册"},
    ])

    let codeRules = ref([
        { required: true, message: '请填写验证码' },
        { validator: validatorCode, message: '验证码有误' }
    ])

    let sendCodeHandler = ()=>{

        if(!registerParams.tel){
            showFailToast("请先输入手机号");
        }else if(isTelOk.value){
            doSendMsgCodeAPI({
                tel:registerParams.tel,
            }).then((res)=>{
                console.log("res",res);
                showSuccessToast("验证码已发送");
            }).catch(err=>{
                showFailToast(err.message);
            })
        }else{
            showFailToast("请先修改手机号");
        }
    }


    let submitHandler = async ()=>{
        console.log("点击提交");

        try{
            var res = await regForm.value.validate();  // 点击注册 表单校验 
            console.log("校验成功",res);
            
            await doFinishRegisterAPI(registerParams);
            console.log("注册成功");

            router.push("/login");


            
        }catch(err:any){
            showFailToast(err.message);
        }
        
    }

</script>

<style scoped>
    .register{
        width: 100%;
        height: 100%;
        background-color: #f7f8fa;
        position: relative;
    }
    .regForm{
        width: 90%;
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
    }
    .footer{
        display: flex;
        justify-content: space-evenly;
        margin-top: 0.2rem;
    }
</style>